<template>
    <view class="training-page">
        <image class="training-banner" src="/static/images/banner-training.jpg" mode="aspectFill"></image>
      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <input class="input" v-model="form.name" placeholder="请输入姓名" />
      </view>
  
      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <radio-group :value="form.gender" @change="e => form.gender = e.detail.value">
          <label class="radio-label"><radio value="男" />男</label>
          <label class="radio-label"><radio value="女" />女</label>
        </radio-group>
      </view>
  
      <!-- 年龄 -->
      <view class="form-item">
        <text class="label">年龄</text>
        <input class="input" v-model="form.age" type="number" placeholder="请输入年龄" />
      </view>
  
      <!-- 培训专项 -->
      <view class="form-item">
        <text class="label">培训专项</text>
        <picker class="input" :range="specialtyOptions" :value="form.specialtyIdx" @change="onSpecialtyChange">
          <view class="picker-value">{{ specialtyOptions[form.specialtyIdx] }}</view>
        </picker>
      </view>
  
      <!-- 课时 -->
      <view class="form-item">
        <text class="label">课时</text>
        <view>
          <radio-group :value="form.lesson" @change="e => form.lesson = e.detail.value">
            <label class="radio-label"><radio value="10" />10</label>
            <label class="radio-label"><radio value="20" />20</label>
            <label class="radio-label"><radio value="other" />其他</label>
          </radio-group>
          <input v-if="form.lesson === 'other'" class="input-inline" v-model="form.lessonOther" type="number" placeholder="请输入课时数" />
        </view>
      </view>
  
      <!-- 备注 -->
      <view class="form-item">
        <text class="label">备注</text>
        <textarea class="input textarea" v-model="form.remark" placeholder="请输入备注" />
      </view>
  
      <!-- 提交按钮 -->
      <view class="form-item">
        <button class="submit-btn" @click="submit">提交</button>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          name: '',
          gender: '男',
          age: '',
          specialtyIdx: 0,
          lesson: '10',
          lessonOther: '',
          remark: ''
        },
        specialtyOptions: ['1000米/800米', '50米', '立定跳远', '引体向上/仰卧起坐', '实心球']
      };
    },
    methods: {
      onSpecialtyChange(e) {
        this.form.specialtyIdx = e.detail.value;
      },
      submit() {
        if (!this.form.name) return uni.showToast({ title: '请输入姓名', icon: 'none' });
        if (!this.form.age) return uni.showToast({ title: '请输入年龄', icon: 'none' });
        if (this.form.lesson === 'other' && !this.form.lessonOther) return uni.showToast({ title: '请输入课时数', icon: 'none' });
  
        uni.showToast({ title: '提交成功', icon: 'success' });
  
        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' });
        }, 1200);
      }
    }
  };
  </script>
  
  <style scoped>
  .training-page {
    padding-bottom: 32rpx;
  }
  .training-page .training-banner {
    width: 100%;
    height: 500rpx;
    margin-bottom: 32rpx;
  }
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    padding: 0 32rpx;
  }
  .label {
    width: 160rpx;
    font-size: 30rpx;
    color: #333;
    margin-right: 16rpx;
    flex-shrink: 0;
  }
  .input {
    flex: 1;
    font-size: 28rpx;
    padding: 18rpx 16rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    background: #fafbfc;
    min-height: 48rpx;
    display: flex;
    align-items: center;
  }
  .input-inline {
    width: 180rpx;
    font-size: 28rpx;
    padding: 10rpx 12rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    background: #fafbfc;
    margin-top: 14px;
  }
  .radio-label {
    margin-right: 40rpx;
    font-size: 28rpx;
  }
  .textarea {
    min-height: 80rpx;
    resize: none;
  }
  .submit-btn {
    width: 100%;
    background: #fe925c;
    color: #fff;
    font-size: 32rpx;
    border-radius: 8rpx;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    padding: 18rpx 0;
  }
  </style>
  